<template>
  <div class="expert-home">
    <!-- 欢迎卡片 -->
    <el-card class="welcome-card">
      <div style="display: flex; align-items: center; justify-content: space-between; padding: 20px;">
        <div style="display: flex; align-items: center;">
          <el-avatar :size="50" style="background-color: #409eff;">
            <i class="el-icon-user" style="font-size: 24px;"></i>
          </el-avatar>
          <div style="margin-left: 16px;">
            <div style="font-size: 18px; font-weight: 600; color: #303133;">欢迎回来，专家</div>
            <div class="date-text">今天是 {{ currentDate }}</div>
          </div>
        </div>
        <el-button type="primary" size="small" @click="goToInquiryList">
          查看询标列表
        </el-button>
      </div>
    </el-card>
    
    <!-- 状态卡片 -->
    <el-row :gutter="16" class="status-cards">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stat-card" shadow="hover">
          <div style="text-align: center; padding: 16px;">
            <i class="el-icon-document" style="font-size: 32px; color: #409eff; margin-bottom: 8px;"></i>
            <div class="status-number">{{ InquiryNum }}</div>
            <div class="status-label">询标数量</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stat-card" shadow="hover">
          <div style="text-align: center; padding: 16px;">
            <i class="el-icon-success" style="font-size: 32px; color: #67c23a; margin-bottom: 8px;"></i>
            <div class="status-number">{{ ReplyNum }}</div>
            <div class="status-label">已回复数量</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stat-card" shadow="hover">
          <div style="text-align: center; padding: 16px;">
            <i class="el-icon-warning" style="font-size: 32px; color: #e6a23c; margin-bottom: 8px;"></i>
            <div class="status-number">{{ WaitingReplyNum }}</div>
            <div class="status-label">待回复数量</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stat-card" shadow="hover">
          <div style="text-align: center; padding: 16px;">
            <i class="el-icon-error" style="font-size: 32px; color: #f56c6c; margin-bottom: 8px;"></i>
            <div class="status-number">{{ DeadlineNoReply }}</div>
            <div class="status-label">超时未回复</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-card class="reply-list-card">
      <div slot="header" style="display: flex; align-items: center; justify-content: space-between; padding: 16px 0;">
        <span style="font-size: 16px; font-weight: 600; color: #303133;">回复列表</span>
        <div style="display: flex; align-items: center; gap: 16px;">
          <el-input
            v-model="search"
            placeholder="请输入编号搜索"
            prefix-icon="el-icon-search"
            style="width: 240px;"
            size="small"
            clearable
          />
        </div>
      </div>

      <div>
        <div style="display: flex; align-items: center; margin-bottom: 16px;">
          <el-radio-group v-model="selectedStatus" style="flex: 1;">
            <el-radio-button
              v-for="status in statusOptions"
              :key="status.value"
              :label="status.value"
            >
              {{ status.text }}
            </el-radio-button>
          </el-radio-group>
        </div>

        <el-table
          :data="inquiries"
          v-loading="loading"
          style="width: 100%; margin-top: 12px;"
          empty-text="暂无数据"
          :header-cell-style="{ background: '#fafafa', color: '#606266', fontSize: '14px' }"
          :row-style="{ height: '50px' }"
          size="medium"
        >
          <el-table-column prop="InquiryNo" label="询标编号" width="140" align="center">
            <template slot-scope="scope">
              <el-link type="primary" @click="goToHome(scope.row)" :underline="false">
                {{ scope.row.InquiryNo }}
              </el-link>
            </template>
          </el-table-column>
          
          <el-table-column prop="UnitName" label="单位名称" min-width="180" show-overflow-tooltip>
          </el-table-column>
          
          <!-- <el-table-column prop="InquiryContent" label="询标内容" min-width="200" show-overflow-tooltip>
          </el-table-column> -->
          
          <!-- <el-table-column prop="ReplyContent" label="回复内容" min-width="180" show-overflow-tooltip>
          </el-table-column> -->
          
          <el-table-column prop="ReplyTime" label="回复时间" width="160" align="center">
          </el-table-column>
          
          <el-table-column prop="CreateTime" label="发起时间" width="160" align="center">
          </el-table-column>
          
          <el-table-column prop="DeadlineTime" label="截止时间" width="160" align="center">
          </el-table-column>
          
          <el-table-column label="状态" width="80" align="center">
            <template slot-scope="scope">
              <el-tag
                size="mini"
                :type="getStatusColor(scope.row)"
              >
                {{ getStatusText(scope.row) }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="120" align="center">
            <template slot-scope="scope">
              <el-button
                class="btn-view"
                size="mini"
                @click="goToHome(scope.row)"
              >
                <i class="el-icon-view" style="margin-right:4px"></i>
                查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页控件 -->
        <div style="display: flex; justify-content: flex-end; padding-top: 16px;">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-size="itemsPerPage"
            layout="total, prev, pager, next"
            :total="totalItems"
            small
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { GetExpertHomeData, GetInquiryReplyRecordPage } from "@/api/ExpertHomeData";

export default {
  name: 'ExpertHome',
  data() {
    return {
      // 响应式数据
      InquiryNum: 0,
      ReplyNum: 0,
      WaitingReplyNum: 0,
      DeadlineNoReply: 0,
      projectId: '',
      projectNo: '',
      search: '',
      loading: false,
      page: 1,
      itemsPerPage: 10,
      totalItems: 0,
      selectedStatus: '0',
      inquiries: [],

      // 状态选项
      statusOptions: [
        { text: '全部', value: '0' },
        { text: '待回复', value: '1' },
        { text: '已回复', value: '2' },
        { text: '已截止', value: '3' }
      ]
    };
  },
  computed: {
    // 当前日期
    currentDate() {
      return new Date().toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        weekday: 'long'
      });
    }
  },
  watch: {
    // 监听分页变化
    page() {
      this.fetchData();
    },
    itemsPerPage() {
      this.page = 1;
      this.fetchData();
    },
    selectedStatus() {
      this.fetchData();
    }
  },
  methods: {

    // 获取分页数据的方法
    async fetchData() {
      this.loading = true;
      try {
        const params = {
          pageIndex: this.page,
          pageSize: this.itemsPerPage,
          projectId: this.projectId,
          type: this.selectedStatus,
        };
        const res = await GetInquiryReplyRecordPage(params);
        console.log('专家首页-回复列表响应:', res);
        const data = res.Data;
        this.inquiries = data.Data || [];
        this.totalItems = data.Count || 0;
      } catch (error) {
        console.error('获取询标记录失败:', error);
      } finally {
        this.loading = false;
      }
    },

    // 分页变化处理
    handleCurrentChange(page) {
      this.page = page;
      this.fetchData();
    },

    // 跳转到询标列表
    goToInquiryList() {
      // 携带必要的查询参数，确保列表页能按项目查询
      this.$router.push({ 
        name: 'expert-inquiry-list', 
        query: { 
          projectId: this.projectId || '',
          projectNo: this.projectNo || ''
        } 
      });
    },

    // 获取状态颜色
    getStatusColor(item) {
      return item.IsReply ? 'success' : 'warning';
    },

    // 获取状态文本
    getStatusText(item) {
      if (new Date(item.DeadlineTime) < new Date() && item.IsReply === false) {
        return '已截止';
      }
      return item.IsReply ? '已回复' : '待回复';
    },

    // 跳转到详情页
    goToHome(item) {
      this.$router.push({ 
        name: 'expert-inquiry-detail',
        query: {
          Id: item.Id,
          projectId: this.projectId,
          projectNo: this.projectNo,
          timestamp: new Date().getTime()
        }
      });
    }

  },
  async mounted() {
    this.loading = true;
    try {
      this.projectId = this.$route.query.projectId || '';
      this.projectNo = this.$route.query.projectNo || '';
      const params = {
        ProjectId: this.$route.query.projectId
      };
      const res = await GetExpertHomeData(params);
      this.InquiryNum = res.Data.InquiryNum;
      this.ReplyNum = res.Data.ReplyNum;
      this.WaitingReplyNum = res.Data.WaitingReplyNum;
      this.DeadlineNoReply = res.Data.DeadlineNoReply;
      this.fetchData();
    } catch (e) {
      console.error("获取专家首页数据失败：", e);
    } finally {
      this.loading = false;
    }
  }
};
</script>

<style scoped>
.expert-home {
  min-height: 100vh;
  padding: 24px;
}

.welcome-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
  margin-bottom: 24px;
  animation: slideInDown 0.6s ease-out;
}

.welcome-card .el-card__header {
  background: transparent;
  border: none;
  padding: 24px;
}

.welcome-card .el-card__body {
  padding: 0;
}

.date-text {
  font-size: 14px;
  margin-top: 4px;
}

.status-cards {
  margin-bottom: 24px;
}

.stat-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  margin-bottom: 16px;
  animation: slideInUp 0.6s ease-out;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.stat-card .el-card__body {
  padding: 0;
}

.status-number {
  font-size: 28px;
  font-weight: 700;
  margin: 8px 0;
  background: linear-gradient(45deg, #409eff, #36cfc9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.status-label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.reply-list {
  margin-top: 24px;
}

.reply-list .el-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  animation: slideInUp 0.8s ease-out;
}

.reply-list .el-card__header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px 12px 0 0;
  padding: 20px 24px;
}

.reply-list .el-card__body {
  padding: 24px;
}

.reply-list-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  animation: slideInUp 0.8s ease-out;
}

.reply-list-card .el-card__header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px 12px 0 0;
  padding: 20px 24px;
}

.reply-list-card .el-card__body {
  padding: 24px;
}

.search-filters {
  margin-bottom: 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.el-input {
  border-radius: 8px;
}

.el-input__inner {
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
}

.el-input__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.el-radio-button__inner {
  border-radius: 6px;
  margin-right: 8px;
  transition: all 0.3s;
}

.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background: linear-gradient(135deg, #409eff, #67c23a);
  border-color: #409eff;
}

/* 表格样式优化 */
.el-table {
  border-radius: 8px;
  overflow: hidden;
}

.el-table th {
  background: #f8f9fa !important;
  color: #495057 !important;
  font-weight: 600;
  border: none;
}

.el-table td {
  border: none;
  padding: 16px 0;
}

.el-table tr:hover {
  background: #f8f9ff !important;
}

.el-tag {
  font-size: 0.8rem;
  border-radius: 12px;
  padding: 4px 12px;
  font-weight: 500;
}

/* 分页样式 */
.el-pagination {
  margin-top: 20px;
}

.el-pagination .el-pager li {
  border-radius: 6px;
  margin: 0 2px;
}

.el-pagination .el-pager li.active {
  background: linear-gradient(45deg, #409eff, #36cfc9);
  color: white;
}

/* 按钮样式优化 */
.el-button {
  text-transform: none;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s;
}

.el-button--primary {
  background: linear-gradient(45deg, #409eff, #36cfc9);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.el-button--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.4);
}

.el-card__header {
  font-size: 1.2rem;
  font-weight: 600;
}

.el-avatar {
  margin-right: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.date-text {
  color: #909399;
  font-size: 0.9rem;
  font-weight: 400;
}

.status-success {
  color: #67c23a;
}

.status-warning {
  color: #e6a23c;
}

.status-error {
  color: #f56c6c;
}

.pagination-container {
  margin-top: 24px;
  text-align: center;
  padding: 20px 0;
}

.el-pagination {
  display: inline-flex;
  background: white;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.el-link {
  font-weight: 500;
  text-decoration: none;
}

.el-link:hover {
  text-decoration: underline;
}

/* 动画效果 */
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.welcome-card,
.stat-card,
.reply-list .el-card {
  animation: fadeInUp 0.6s ease-out;
}

.stat-card:nth-child(2) {
  animation-delay: 0.1s;
}

.stat-card:nth-child(3) {
  animation-delay: 0.2s;
}

.stat-card:nth-child(4) {
  animation-delay: 0.3s;
}

.reply-list .el-card {
  animation-delay: 0.4s;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .expert-home {
    padding: 16px;
  }
  
  .welcome-card .el-card__header {
    padding: 16px;
  }
  
  .stat-card .el-card__body {
    padding: 16px;
  }
  
  .status-number {
    font-size: 24px;
  }
  
  .reply-list-card .el-card__body {
    padding: 16px;
  }
  
  .search-filters {
    flex-direction: column;
    align-items: stretch;
  }
  
  .el-input {
    margin-bottom: 12px;
  }
}

@media (max-width: 480px) {
  .status-cards .el-col {
    margin-bottom: 16px;
  }
  
  .el-table {
    font-size: 12px;
  }
  
  .el-button {
    padding: 8px 12px;
    font-size: 12px;
  }
  
  .stat-card {
    padding: 16px;
  }
  
  .status-number {
    font-size: 1.8rem;
  }
}
.btn-view {
  border: 1px solid #409eff;
  color: #409eff;
  background: #fff;
  border-radius: 16px;
  padding: 6px 12px;
  line-height: 1;
  transition: all .2s ease-in-out;
}
.btn-view:hover {
  background: rgba(64,158,255,.08);
  box-shadow: 0 2px 8px rgba(64,158,255,.2);
}
.btn-view:active {
  transform: translateY(1px);
}
</style>
